<template>
  <div class="wrapper">
    <div class="banner">
      <img src="@/assets/images/img_banner.jpg"/>
    </div>
    <div class="column">
      <a @click="onSwt">
        <img src="@/assets/images/img_column1.jpg"/>
      </a>
      <a @click="onSwt">
        <img src="@/assets/images/img_column2.jpg"/>
      </a>
      <a @click="onSwt">
        <img src="@/assets/images/img_column3.jpg"/>
      </a>
      <a @click="onSwt">
        <img src="@/assets/images/img_column4.jpg"/>
      </a>
    </div>
    <div class="business">
      <div class="trademark">
        <div class="w1200">
          <div class="title">
            <h3>商标服务</h3>
            <h4>专业 快速 高成功率</h4>
          </div>
          <div class="list">
            <div class="left">
              <div class="leftBar">
                <div class="tit">
                  <h4>商标注册</h4>
                  <h5>专业代理助成功</h5>
                </div>
                <h2>保护品牌</h2>
                <h3>树立品牌形象</h3>
                <img src="@/assets/images/icon_trademark.png"/>
              </div>
              <ul>
                <li v-for="(item,index) in tmList" v-if="index >= 6" :key="item.id">
                  <router-link :to="{ name: 'ProductDetail', params: { id: item.id } }">
                    <h4>{{item.name}}</h4>
                    <p><ellipsis :length="40">{{item.describe}}</ellipsis></p>
                    <div class="price">
<!--                      <p v-if="item.price != 0">￥<span>{{item.price}} </span>起</p>-->
<!--                      <a v-else @click="onSwt">立即咨询</a>-->
                      <a @click="onSwt">立即咨询</a>
                      <img src="@/assets/images/icon_arrow.png"/>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
            <div class="right">
              <a class="consult" @click="onSwt">立即咨询</a>
            </div>
          </div>
        </div>
      </div>
      <div class="patent">
        <div class="w1200">
          <div class="title">
            <h3>专利服务</h3>
            <h4>专业权威、快速响应</h4>
          </div>
          <div class="list">
            <div class="left">
              <div class="leftBar">
                <div class="tit">
                  <h4>专利申请</h4>
                  <h5>高效拿证省心力</h5>
                </div>
                <h2>群英汇聚</h2>
                <h3>优质专利服务商人选</h3>
                <img src="@/assets/images/icon_patent.png"/>
              </div>
              <ul>
                <li v-for="(item,index) in ptList" v-if="index >= 6" :key="item.id">
                  <router-link :to="{ name: 'ProductDetail', params: { id: item.id } }">
                    <h4>{{item.name}}</h4>
                    <p><ellipsis :length="40">{{item.describe}}</ellipsis></p>
                    <div class="price">
<!--                      <p v-if="item.price != 0">￥<span>{{item.price}} </span>起</p>-->
<!--                      <a v-else @click="onSwt">立即咨询</a>-->
                      <a @click="onSwt">立即咨询</a>
                      <img src="@/assets/images/icon_arrow.png"/>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
            <div class="right">
              <a class="consult" @click="onSwt">立即咨询</a>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="w1200">
          <div class="title">
            <h3>版权服务</h3>
            <h4>专业 快速 高成功率</h4>
          </div>
          <div class="list">
            <div class="left">
              <div class="leftBar">
                <div class="tit">
                  <h4>版权登记</h4>
                  <h5>专业代理服务助成功</h5>
                </div>
                <h2>众里挑一</h2>
                <h3>超高性价比服务商任选</h3>
                <img src="@/assets/images/icon_copyright.png"/>
              </div>
              <ul>
                <li v-for="(item,index) in cpList" v-if="index < 6" :key="item.id">
                  <router-link :to="{ name: 'ProductDetail', params: { id: item.id } }">
                    <h4>{{item.name}}</h4>
                    <p><ellipsis :length="40">{{item.describe}}</ellipsis></p>
                    <div class="price">
<!--                      <p v-if="item.price != 0">￥<span>{{item.price}} </span>起</p>-->
<!--                      <a v-else @click="onSwt">立即咨询</a>-->
                      <a @click="onSwt">立即咨询</a>
                      <img src="@/assets/images/icon_arrow.png"/>
                    </div>
                  </router-link>
                </li>
              </ul>
            </div>
            <div class="right">
              <a class="consult" @click="onSwt">立即咨询</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="service">
      <div class="w1200">
        <div class="title">
          <h3>企业服务</h3>
        </div>
        <ul>
          <li>
            <img src="@/assets/images/img_service1.jpg"/>
            <h4>国家高新企业认定</h4>
            <p>评估无形资产，提升市值主力企业融资</p>
            <a class="know" @click="onSwt">了解详情</a>
          </li>
          <li>
            <img src="@/assets/images/img_service2.jpg"/>
            <h4>知识产权评估</h4>
            <p>享税收减免，促品牌提升，用创新助力</p>
            <a class="know" @click="onSwt">了解详情</a>
          </li>
          <li>
            <img src="@/assets/images/img_service3.jpg"/>
            <h4>资质认证</h4>
            <p>按照国际标准认证企业质量管理</p>
            <a class="know" @click="onSwt">了解详情</a>
          </li>
          <li>
            <img src="@/assets/images/img_service4.jpg"/>
            <h4>专利挖掘分析</h4>
            <p>郑密昂软件质量的必备材料</p>
            <a class="know" @click="onSwt">了解详情</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="certCase">
      <div class="w1200">
        <div class="cert">
          <div class="title">
            <h3>荣誉资质</h3>
          </div>
          <img src="@/assets/images/img_cert.jpg"/>
        </div>
        <div class="case">
          <div class="title">
            <h3>成功案例</h3>
            <ul>
              <li><img src="@/assets/images/img_case1.jpg"/></li>
              <li><img src="@/assets/images/img_case2.jpg"/></li>
              <li><img src="@/assets/images/img_case3.jpg"/></li>
              <li><img src="@/assets/images/img_case4.jpg"/></li>
              <li><img src="@/assets/images/img_case5.jpg"/></li>
              <li><img src="@/assets/images/img_case6.jpg"/></li>
              <li><img src="@/assets/images/img_case7.jpg"/></li>
              <li><img src="@/assets/images/img_case8.jpg"/></li>
              <li><img src="@/assets/images/img_case9.jpg"/></li>
              <li><img src="@/assets/images/img_case10.jpg"/></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPt, getSb, getCp } from '@/api/web'
import Ellipsis from '@/components/Ellipsis/Ellipsis'
import apis from '@/api'

export default {
  components: {
    Ellipsis
  },
  name: 'index',
  data () {
    return {
      tmList: [],
      ptList: [],
      cpList: []
    }
  },
  created () {
    this.getProductList()
  },
  methods: {
    getProductList () {
      getSb().then(res => {
        this.tmList = res.result.data
        getPt().then(res => {
          this.ptList = res.result.data
          getCp().then(res => {
            this.cpList = res.result.data
          })
        })
      })
    },
    onSwt () {
      window.open(apis.Swt)
    }
  }
}
</script>

<style scoped>
  h2, h3, h4, h5, p, a, li, ul, div, span {margin: 0;padding: 0;font-weight: 500;}
  .wrapper{background-color: #FFFFFF;}
  .w1200{width: 1200px;margin: 0 auto;}
  .title{text-align: center;}
  .title h3{font-size: 36px;color: #333333;}
  .title h4{font-size: 16px;color: #999999;}
  .banner{font-size: 0;margin-top: -20px;}
  .banner img{width: 100%;}
  .column{display: flex;align-items: center;justify-content: center;margin-top: 50px;}
  .column a{margin: 0 15px;}
  .business{background: url("../../assets/images/bg_patent.jpg")no-repeat center 1170px;background-size: auto 555px;}
  .trademark{margin-top: 80px;}
  .trademark .list .left .leftBar .tit{background: url("../../assets/images/img_trademark.jpg")no-repeat center;}
  .patent{margin-top: 106px;}
  .patent .list .left .leftBar .tit{background: url("../../assets/images/img_patent.jpg")no-repeat center;}
  .copyright{margin-top: 88px;}
  .copyright .list .left .leftBar .tit{background: url("../../assets/images/img_copyright.jpg")no-repeat center;}
  .list{display: flex;align-items: center;justify-content: space-between;margin-top: 55px;}
  .list .left{box-shadow: 0 0 15px 1px rgba(0,0,0,0.2);display: flex;}
  .list .left .leftBar{text-align: center;width: 285px;height: 450px;background: url("../../assets/images/bg_listleft.jpg")no-repeat center;}
  .list .left .leftBar .tit{width: 220px;height: 150px;margin: -10px auto 0;padding-top: 35px;}
  .list .left .leftBar .tit h4{font-size: 30px;color: #ffffff;}
  .list .left .leftBar .tit h5{font-size: 16px;color: #ffffff;margin-top: 5px;}
  .list .left .leftBar h2{font-size: 40px;color: #ffffff;margin-top: 64px;}
  .list .left .leftBar h3{font-size: 22px;color: #ffffff;margin-bottom: 20px;}
  .list .left ul{background: url("../../assets/images/bg_list.jpg")no-repeat center;width: 650px;height: 450px;display: flex;flex-flow: row wrap;}
  .list .left ul li{width: 50%;height: 150px;padding-left: 20px;padding-top: 16px;}
  .list .left ul li:nth-child(-n+4){border-bottom: solid 1px #dddddd;}
  .list .left ul li:nth-child(2n+1){border-right: solid 1px #dddddd;}
  .list .left ul li h4{font-size: 20px;color: #333333;position: relative;}
  .list .left ul li h4:before{position: absolute;content: '';width: 4px;height: 20px;background-color: #ff6021;left: -20px;top: 50%;margin-top: -10px;}
  .list .left ul li p{font-size: 14px;color: #9fa19f;}
  .list .left ul li .price{font-size: 16px;display: flex;align-items: center;justify-content: space-between;margin-top: 15px;padding-right: 30px;}
  .list .left ul li .price p{display: flex;align-items: baseline;color: #e83c3c;margin-top: 2px;}
  .list .left ul li .price p span{font-size: 38px;margin-right: 6px;}
  .list .right{background: url("../../assets/images/bg_listright.jpg")no-repeat center;width: 224px;height: 450px;text-align: center;box-shadow: 0 0 15px 1px rgba(0,0,0,0.2);padding-top: 166px;}
  .list .right .consult{font-size: 16px;color: #ffffff;background-color: #384461;cursor: pointer;display: inline-block;width: 158px;line-height: 36px;border-radius: 18px;box-shadow: 0 4px 5px 1px rgba(6,0,1,0.24);}
  .service{margin-top: 84px;}
  .service ul{display: flex;justify-content: space-between;align-items: center;margin-top: 43px;}
  .service ul li{text-align: center;box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);width: 285px;height: 434px;}
  .service ul li h4{font-size: 24px;color: #333333;font-weight: 700;position: relative;padding-bottom: 28px;margin-top: 23px;}
  .service ul li h4:before{position: absolute;content: '';width: 36px;height: 4px;background-color: #ff6021;left: 50%;margin-left: -18px;bottom: 0}
  .service ul li p{font-size: 14px;color: #999999;margin: 25px 0;}
  .service ul li .know{display: inline-block;width: 140px;line-height: 40px;cursor: pointer;color: #ffffff;background-color: #ff6021;font-size: 16px;border-radius: 20px;}
  .certCase{background: url("../../assets/images/bg_case.jpg")no-repeat center bottom;background-size: auto 742px;text-align: center;margin-top: 86px;}
  .cert img{margin-top: 53px;box-shadow: 0 0 10px 1px rgba(0,0,0,0.1);}
  .case{margin-top: 64px;padding-bottom: 52px;}
  .case ul{display: flex;align-items: center;justify-content: space-between;flex-flow: row wrap;margin-top: 53px;}
  .case ul li{box-shadow: 0 0 10px 1px rgba(0,0,0,0.2);margin-bottom: 13px;}
</style>
